Tạo thông báo hiển thị trên trình duyệt bằng Javascript.

Đối với việc xây dựng website, blog, ứng dụng,.. ta có thể thêm vào đó chức năng thông báo ra màn hình trình duyệt cho người dùng biết rằng trang web của bạn vừa có cập nhật tính năng mới, có bài viết mới hay bất cứ thứ gì bạn cần thông báo tới người dùng một cách hoàn toàn tự động.

Ở bài viết này mình sẽ chỉ các bạn làm thế nào để viết một đoạn code tạo thông báo đơn giản khi người dùng click vào một Button.

Chuẩn bị kiến thức

Để theo dõi bài hướng dẫn này dễ dàng hơn, bạn sẽ cần đến kiến thức về Javascript, và quan trọng nhất là API Notification. Các bạn có thể tìm hiểu về Web API này tại đây.

Bắt đầu xây dựng

Đầu tiên, ta sẽ tạo một file .html chứa thẻ Button đơn giản như sau:

Tiếp theo ta cần xây dựng một hàm bắt sự kiện từ Button, ta sẽ thêm vào tag Button một attribute là onclick=thongBao(). Mỗi khi ta click vào Button, hàm thongBao() sẽ được gọi và thực thi.

Nào giờ tạo 1 file .js định nghĩa cho hàm thongBao(), đầu tiên ta cần kiểm tra và thông báo cho người dùng biết nếu API Notification này không hoạt động trên trình duyệt hiện tại.

Bạn cần biết rằng API này có một property là permission nhận các giá trị sau:

     granted - Người dùng đã cấp phép cho hiển thị thông báo.
     denied - Người dùng đã từ chối cho hiển thị thông báo.
     default - Trạng thái mặc định khi người dùng chưa quyết định, có hoạt động giống denied

Do vậy ta cần thêm một lệnh rẽ nhánh khi đã biết API này có thể hoạt động trên trình duyệt hiện tại, lệnh rẽ nhánh này thực hiện kiểm tra và yêu cầu người dùng nếu họ chưa cấp phép cho hiển thị thông báo.

Nếu người dùng đã cấp phép thì ta chuyển luôn qua nhánh khác, bắt đầu tùy chỉnh cho thông báo khi hiển thị đến người dùng.

Cũng trong phần rẽ nhánh này, ta sẽ tạo luôn một hàm bắt sự kiện khi Button được click và mở trang mới dẫn đến đường dẫn đã chỉ định.

Nội dung hoàn chỉnh của hàm thongBao() như sau:

Cuối cùng, ta dùng addEventListener() để yêu cầu người dùng cấp phép cho ứng dụng được phép thông báo khi nội dung file html được nạp.

Mình sẽ viết lại chung vào một file .html cho dễ quan sát.

Vậy là bạn đã biết cách để tạo thông báo gửi đến người dùng bằng Javascript, bạn có thể áp dụng để viết các chương trình gửi thông báo đến người dùng khi có một bài viết mới được tạo, cập nhật mới của trang web,.. hãy vận dụng sự sáng tạo của bản thân!

Chúc các bạn học tập tốt!